import { useState } from 'react';
import '../src/App.scss'
import avatar from './images/bozai.png'
import _ from 'loadsh'

// 当前登录用户信息
const user = {
  // 用户id
  uid: '30009257',
  // 用户头像
  avatar,
  // 用户昵称
  uname: '黑马前端',
}

// 导航 Tab 数组
const tabs = [
  { type: 'hot', text: '最热' },
  { type: 'time', text: '最新' },
]

// 渲染列表
let list = [
  {
    "rpid": 3,
    "user": {
      "uid": "13258165",
      "avatar": "http://toutiao.itheima.net/resources/images/98.jpg",
      "uname": "周杰伦"
    },
    "content": "哎哟，不错哦",
    "ctime": "10-18 08: 15",
    "like": 126
  },
  {
    "rpid": 2,
    "user": {
      "uid": "36080105",
      "avatar": "http://toutiao.itheima.net/resources/images/98.jpg",
      "uname": "许嵩"
    },
    "content": "我寻你千百度 日出到迟暮",
    "ctime": "11-13 11: 29",
    "like": 88
  },
  {
    "rpid": 1,
    "user": {
      "uid": "30009257",
      "avatar": "http://toutiao.itheima.net/resources/images/98.jpg",
      "uname": "黑马前端"
    },
    "content": "学前端就来黑马",
    "ctime": "10-19 09: 00",
    "like": 66
  }
]
function App() {
  const [listItem,setListItem] = useState(_.orderBy(list,'like','desc'))

  // 删除功能
   const del = (id) => {
    console.log('点击删除  ----->  ', );
    // !!!!!
    setListItem(listItem.filter(item => item.rpid !== id))
   }

   // 点击高亮
   const [ type , setType ] = useState('hot')

   const handTabChange = (type) =>  {
    console.log('type  ----->  ', type);
    setType(type)

    //排序  
    // 使用第三方库  lodash
    // 第一个参数 原数据  第二个参数 按照哪个字段进行排序  第三个参数 排序的方式（"desc" 降序， "asc" 升序）

    if(type === 'hot') {
       setListItem(_.orderBy(list ,'like','desc'))
    }else{
      setListItem(_.orderBy(list ,'ctime','desc'))
      
    }

   
   }

   
  return (
    <div className="app">
    {/* 导航 Tab */}
    <div className="reply-navigation">
      <ul className="nav-bar">
        <li className="nav-title">
          <span className="nav-title-text">评论</span>
          {/* 评论数量 */}
          <span className="total-reply">{10}</span>
        </li>
        <li className="nav-sort">
          {/* 高亮类名： active */}
          {tabs.map(item =>
              <span
                key={item.type} onClick={()=>handTabChange(item.type)}  className={`nav-item ${item.type === type && 'active'}` }>
                {item.text}
              </span>)}
        </li>
      </ul>
    </div>

    <div className="reply-wrap">
      {/* 发表评论 */}
      <div className="box-normal">
        {/* 当前用户头像 */}
        <div className="reply-box-avatar">
          <div className="bili-avatar">
            <img className="bili-avatar-img" src={avatar}  alt="用户头像" />
          </div>
        </div>
        <div className="reply-box-wrap">
          {/* 评论框 */}
          <textarea
            className="reply-box-textarea"
            placeholder="发一条友善的评论"
          />
          {/* 发布按钮 */}
          <div className="reply-box-send">
            <div className="send-text" >发布</div>
          </div>
        </div>
      </div>
      {/* 评论列表 */}
      <div className="reply-list">
        {/* 评论项 */}
       {listItem.map(item =>(    <div className="reply-item" key={item.rpid}>
      {/* 头像 */}
      <div className="root-reply-avatar">
        <div className="bili-avatar">
          <img
            className="bili-avatar-img"
            alt=""
            src={item.user.avatar}
          />
        </div>
      </div>

      <div className="content-wrap">
        {/* 用户名 */}
        <div className="user-info">
          <div className="user-name">{item.user.uname}</div>
        </div>
        {/* 评论内容 */}
        <div className="root-reply">
          <span className="reply-content">{item.content}</span>
          <div className="reply-info">
            {/* 评论时间 */}
            <span className="reply-time">{item.ctime}</span>
            {/* 评论数量 */}
            <span className="reply-time">点赞数:{item.like}</span>
            {/* 条件：user.id === item.user.id */}
            {user.uid === item.user.uid &&
              <span className="delete-btn" onClick={()=>del(item.rpid)}>
                删除
              </span>}
          </div>
        </div>
      </div>
    </div>))}
      </div>
    </div>
  </div>
  );
}

export default App;
